<template>
  <jf-navigation through>
    <template #right>
      <image
        src="@/static/images/index/user/icon001.png"
        class="user_navigation_icon"
        @click="navGo('/pages/index/setting/setting')"
      ></image>
    </template>
  </jf-navigation>

  <view class="user_background">
    <image
      :src="userinfo.user_bg"
      mode="top"
      class="user_background_img"
    ></image>
    <view class="user_background_edit" @click="changeBg()">
      <image src="@/static/images/index/user/icon002.png"></image>
      <view>{{ $t('index.user.editBackground') }}</view>
    </view>
  </view>

  <view class="user_container">
    <view class="user_top">
      <view class="user_info">
        <view class="user_info_img">
          <image :src="userinfo.avatar || headerIcon" mode="aspectFill"></image>
          <image
            src="@/static/images/index/user/icon003.png"
            @click="navGo('/pages/index/userinfo/userinfo')"
          ></image>
        </view>
        <view class="user_info_text">
          <view class="user_info_text_top">
            <view class="user_info_name">{{
              userinfo.nickname || $t('index.user.noNickname')
            }}</view>
            <view class="user_info_level">
              <view>LV{{ userinfo.level }}</view>
              <image src="@/static/images/common/level_icon.png"></image>
            </view>
          </view>
          <view class="user_info_text_bottom">
            <view>ID：{{ userinfo.uid }}</view>
            <view
              >IP：{{ userinfo.address || $t('index.user.addressNone') }}</view
            >
          </view>
        </view>
      </view>

      <view class="user_statistics">
        <view class="user_statistics_item">
          <view>{{ userinfo.total_posts }}</view>
          <view>{{ $t('index.user.dynamic') }}</view>
        </view>
        <view
          class="user_statistics_item"
          @click="navGo('/pages/index/attention/attention')"
        >
          <view>{{ userinfo.total_collect }}</view>
          <view>{{ $t('index.user.attention') }}</view>
        </view>
        <view
          class="user_statistics_item"
          @click="navGo('/pages/index/fans/fans')"
        >
          <view>{{ userinfo.total_fans }}</view>
          <view>{{ $t('index.user.fans') }}</view>
          <view v-if="newsTotal > 0">{{ newsTotal }}</view>
        </view>
      </view>

      <view class="user_remark">
        <view
          >{{ $t('index.user.remark') }}：<text>{{
            userinfo.mark || $t('index.user.remarkNone')
          }}</text></view
        >
        <image src="@/static/images/index/icon012.png"></image>
      </view>

      <view class="user_menu">
        <view
          :class="{ active: data.currentIndex === 0 }"
          @click="selMenu(0)"
          >{{ $t('index.user.issue') }}</view
        >
        <view
          :class="{ active: data.currentIndex === 1 }"
          @click="selMenu(1)"
          >{{ $t('index.user.collect') }}</view
        >
        <view
          :class="{ active: data.currentIndex === 2 }"
          @click="selMenu(2)"
          >{{ $t('index.user.endorse') }}</view
        >
      </view>

      <jf-falls
        :list="data.list"
        :loading="data.loading"
        :loadEnd="data.loadEnd"
        :loadError="data.loadError"
        :total="data.total"
        :loadNoneText="$t('common.load.none')"
        :loadEndText="$t('common.load.notMore')"
        :loadErrorText="$t('common.load.error')"
      >
        <template #scope="{ item }">
          <jf-forum
            :item="item"
            :type="data.currentIndex === 0 ? '1' : '0'"
          ></jf-forum>
        </template>
      </jf-falls>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {
  reactive,
  computed,
  getCurrentInstance,
  onMounted,
  nextTick,
  watch,
} from 'vue'
import headerIcon from '@/static/images/common/header_icon.png'
import { useStore } from '@/store/main'
import { upload } from '@/api/common'
import { saveUserinfo } from '@/api/login'
import { listArticle } from '@/api/article'

const props = withDefaults(
  defineProps<{
    reachBottom: boolean
  }>(),
  {
    reachBottom: false,
  }
)
const emits = defineEmits<{
  (e: 'update:reachBottom', value: boolean): void
}>()
const { proxy } = getCurrentInstance()
const store = useStore()
const userinfo = computed(() => {
  return store.getUserinfo
})
const newsTotal = computed(() => {
  return store.getNews.fans_num
})
const data = reactive({
  currentIndex: 0,
  list: [],
  loading: false,
  total: 0,
  loadEnd: false,
  loadError: false,
})
const queryParams = reactive({
  page: 1,
  limit: 10,
  type: 1,
})

const selMenu = (current: number): void => {
  data.currentIndex = current
  queryParams.type = current + 1
  emits('update:reachBottom', false)
  getList(true)
}
const navGo = (url: string): void => {
  uni.navigateTo({ url })
}
const getList = (init?: boolean): void => {
  if (init) {
    queryParams.page = 1
    data.total = 0
    data.list = []
    data.loadEnd = false
    data.loadError = false
    data.loading = false
  }
  if (data.loadEnd || data.loading) {
    emits('update:reachBottom', false)
    return
  }
  data.loading = true
  data.loadEnd = false
  data.loadError = false
  listArticle(queryParams)
    .then((res: any) => {
      data.total = res.data.count
      data.list = data.list.concat(res.data.list)
      if (queryParams.page * queryParams.limit > data.total) {
        data.loadEnd = true
      }
      queryParams.page += 1
      emits('update:reachBottom', false)
    })
    .catch(() => {
      data.loadError = true
      emits('update:reachBottom', false)
    })
    .finally((): void => {
      data.loading = false
    })
}
const changeBg = (): void => {
  uni.chooseImage({
    count: 1,
    success: (res: any) => {
      upload(res.tempFiles)
        .then((res: any) => {
          saveUserinfo({ user_bg: res[0].url })
            .then(() => {
              store.setUserinfo({ user_bg: res[0].url })
              uni.showToast({
                title: proxy.$t('index.user.success'),
                icon: 'none',
              })
            })
            .catch(() => {
              uni.showToast({
                title: proxy.$t('index.user.fail'),
                icon: 'none',
              })
            })
        })
        .catch(() => {
          uni.showToast({
            title: proxy.$t('index.user.fail'),
            icon: 'none',
          })
        })
    },
  })
}

onMounted(() => {
  nextTick(() => {
    selMenu(0)
  })
})
watch(
  () => props.reachBottom,
  (nVal: boolean): void => {
    if (nVal) getList()
  },
  {
    deep: true,
  }
)
</script>

<style lang="scss">
.user_navigation_icon {
  width: 48rpx;
  height: 48rpx;
}
.user_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 362rpx;
  overflow: hidden;
  .user_background_img {
    width: 100vw;
    height: 360rpx;
    background: #eeeeee;
  }
  .user_background_edit {
    position: absolute;
    right: 32rpx;
    bottom: 64rpx;
    @include layout();
    height: 44rpx;
    padding: 0 16rpx;
    border-radius: 22rpx;
    background: #00000044;
    font-weight: 400;
    color: #ffffff;
    font-size: 24rpx;
    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 6rpx;
    }
  }
}
.user_container {
  padding-top: 330rpx;
  .user_top {
    position: relative;
    z-index: 1;
    width: 100vw;
    border-radius: 32rpx 32rpx 0 0;
    background: #ffffff;
    box-sizing: border-box;
    .user_info {
      @include layout(row, flex-start);
      width: 686rpx;
      height: 106rpx;
      padding-top: 24rpx;
      margin-left: 32rpx;
      .user_info_img {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        border: 4rpx solid #ffffff;
        border-radius: 80rpx;
        box-sizing: border-box;
        flex-shrink: 0;
        margin-top: -54rpx;
        image {
          &:nth-child(1) {
            width: 152rpx;
            height: 152rpx;
            border-radius: 76rpx;
            box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
          }
          &:nth-child(2) {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 48rpx;
            height: 48rpx;
          }
        }
      }
      .user_info_text {
        margin-left: 32rpx;
        flex-grow: 1;
        .user_info_text_top {
          @include layout();
          .user_info_name {
            font-weight: 600;
            line-height: 44rpx;
            font-size: 36rpx;
          }
          .user_info_level {
            position: relative;
            margin-left: 16rpx;
            view {
              padding: 0 14rpx 0 46rpx;
              background: var(--background);
              font-weight: 500;
              color: #ffffff;
              line-height: 32rpx;
              font-size: 20rpx;
              border-radius: 16rpx;
            }
            image {
              position: absolute;
              left: 0;
              top: -4rpx;
              width: 40rpx;
              height: 40rpx;
            }
          }
        }
        .user_info_text_bottom {
          @include layout();
          font-weight: 400;
          color: #a2a9b7;
          font-size: 22rpx;
          line-height: 44rpx;
          margin-top: 16rpx;
          view {
            &:nth-child(2) {
              margin-left: 32rpx;
            }
          }
        }
      }
    }
    .user_statistics {
      width: 686rpx;
      @include layout();
      padding: 40rpx 0 0 32rpx;
      .user_statistics_item {
        @include layout(row, flex-end);
        margin-right: 32rpx;
        height: 44rpx;
        view {
          &:nth-child(1) {
            font-family: DIN;
            font-weight: bold;
            font-size: 36rpx;
            line-height: 44rpx;
          }
          &:nth-child(2) {
            font-weight: 400;
            color: #7c8493;
            font-size: 24rpx;
            margin-left: 4rpx;
          }
          &:nth-child(3) {
            height: 32rpx;
            min-width: 32rpx;
            border-radius: 16rpx;
            box-sizing: border-box;
            padding: 0 10rpx;
            text-align: center;
            font-size: 20rpx;
            line-height: 32rpx;
            background: #f83c1e;
            color: #ffffff;
            font-weight: 500;
            margin-left: 4rpx;
            transform: translateY(-6rpx);
          }
        }
      }
    }
    .user_remark {
      width: 686rpx;
      margin: 24rpx 0 0 32rpx;
      @include layout(row, flex-start);
      font-weight: 400;
      font-size: 26rpx;
      line-height: 44rpx;
      view {
        flex-grow: 1;
      }
      image {
        width: 32rpx;
        height: 32rpx;
        margin-left: 24rpx;
        flex-shrink: 0;
        margin-top: 6rpx;
      }
    }
    .user_menu {
      width: 686rpx;
      border-top: 2rpx solid #e7eaee;
      margin-top: 40rpx;
      padding: 32rpx 0 8rpx 0;
      margin-left: 32rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      view {
        width: 180rpx;
        position: relative;
        height: 58rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #7c8493;
        line-height: 44rpx;
        text-align: center;
        &.active {
          color: #1f2937;
          font-weight: 600;
          &::before {
            position: absolute;
            content: '';
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 40rpx;
            height: 8rpx;
            border-radius: 4rpx;
            background: var(--background);
          }
        }
      }
    }
  }
}
</style>
